<template>
  <div class="page-box">
    <div class="search-box">
      <el-button type="primary" @click="showSelectionRows"> <delete theme="outline" size="14" /> 批量删除 </el-button>
      <el-button type="primary" @click="showSelectionOneRow"> <edit theme="outline" size="14" /> 修改 </el-button>
    </div>
    <div class="table-box">
      <el-table
        ref="multipleTableRef"
        v-loading="loading"
        height="100%"
        :data="tableData"
        border
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="40" align="center" type="selection"></el-table-column>
        <el-table-column label="" width="100">
          <template #default="scope">
            {{ scope.$index + 1 + (page.currentPage - 1) * page.pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="inspectionDate" label="日期" width="180" />
        <el-table-column prop="userName" label="用户名" width="180" />
        <el-table-column prop="cityName" label="城市" />
        <el-table-column prop="title" label="标题" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <el-button type="primary" link @click="showData(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-box">
      <DuPagination :page="page" @size-change="onPageSizeChange" @current-change="onPageCurrentChange"></DuPagination>
    </div>
  </div>
</template>
<script setup>
import { Delete, Edit } from '@icon-park/vue-next'
import { useSampleTable } from '@/hooks/service/m1/useSampleTable'
import { useMultipleTable } from '@/hooks/element/useEleTable'
const { page, tableData, loading, getTableData } = useSampleTable()
const {
  multipleTableRef,
  handleRowClick,
  selectionRows,
  handleSelectionChange,
  validateSelectionRows,
  validateSelectionOneRow,
} = useMultipleTable()

getTableData()

// 批量删除
const showSelectionRows = () => {
  validateSelectionRows()
    .then(() => {
      const users = selectionRows.value.map((item) => item.userName)
      DuMessage.info(users)
    })
    .catch((e) => {
      console.log(e)
    })
}
// 修改
const showSelectionOneRow = () => {
  validateSelectionOneRow()
    .then(() => {
      const users = selectionRows.value.map((item) => item.userName)
      DuMessage.info(users)
    })
    .catch((e) => {
      console.log(e)
    })
}
// 查看
const showData = (data) => {
  DuMessage.info(data)
}

const onPageSizeChange = () => {
  getTableData()
}
const onPageCurrentChange = () => {
  getTableData()
}
</script>

<style scoped lang="scss">
.search-box {
  margin-bottom: 20px;
  text-align: right;
}
.table-box {
  flex: 1;
  overflow: hidden;
}
</style>
